<template>
    <ItemMusicTop :playlist="state.playlist"></ItemMusicTop>
    <ItemMusicList :itemlist="state.itemlist" :subscribedCount="state.playlist.subscribedCount"></ItemMusicList>
</template>

<script>

import { useRoute } from 'vue-router'
import { onMounted, reactive } from 'vue'

import { getMusicItemList } from '@/request/api/item'

import ItemMusicTop from '@/components/item/ItemMusicTop.vue'
import ItemMusicList from '@/components/item/ItemMusicList.vue'
export default {
    setup() {
        const state = reactive({
            playlist: {},
            itemlist: []// 歌单的歌曲
        })
        onMounted(async () => {
            let id = useRoute().query.id
            // console.log(id)
            // 获取歌单详情页
            let res = await getMusicItemList(id)
            console.log(res)
            state.playlist = res.data.playlist

            // 获取歌单的歌曲
            let result = res.data.playlist.tracks
            state.itemlist = result
            // console.log(state.itemlist)
            // 防止页面刷新数据丢失，将数据保存到sessionStorage
            sessionStorage.setItem('itemDetail', JSON.stringify(state))
        })
        return {
            state
        }
    },
    components: {
        ItemMusicTop,
        ItemMusicList
    }
}
</script>

<style lang="less" scoped>

</style>